<script setup lang="ts">
import I18 from "@/layouts/components/I18/index.vue";
import useUserStore from "@/store/modules/user";
import Setup from "@/layouts/components/Setup/index.vue";
import Message from "@/layouts/components/Message/index.vue";

const flag = ref(false)
const userStore = useUserStore()
const router = useRouter()
const visible = ref(false)

function changeDropdown() {
  flag.value = !flag.value
}

function toUserInfo() {
  router.push('/enrollee/profile')
}

function toSystemSet() {
  router.push('/system/menu')
}

const logOut = () => {
  userStore.token = ''
  userStore.userInfo = {}
  router.push('/login')
}

const changeVisible = () => {
  visible.value = !visible.value
}

</script>

<template>
  <div class="flex items-center tool">
    <lay-tooltip content="全屏" trigger="hover">
      <lay-fullscreen v-slot="{ toggle, isFullscreen }">
        <lay-icon @click="toggle"
                  class="tool-icon"
                  :type="
                        isFullscreen
                          ? 'layui-icon-screen-restore'
                          : 'layui-icon-screen-full'
                      "
        ></lay-icon>
      </lay-fullscreen>
    </lay-tooltip>
    <lay-tooltip content="消息" trigger="hover">
      <Message>
        <lay-icon
            class="tool-icon" type="layui-icon-notice"
            @click="changeDropdown"
        ></lay-icon>
      </Message>

    </lay-tooltip>
    <lay-tooltip content="国际化" trigger="hover">
      <I18 placement="bottom">
        <lay-icon class="tool-icon" type="layui-icon-website"></lay-icon>
      </I18>
    </lay-tooltip>
    <lay-dropdown placement="bottom">
      <lay-icon class="tool-icon" type="layui-icon-username"></lay-icon>
      <template #content>
        <lay-dropdown-menu>
          <lay-dropdown-menu-item @click="toUserInfo">
            <template #default>用户信息</template>
          </lay-dropdown-menu-item>
          <lay-dropdown-menu-item @click="toSystemSet">
            <template #default>系统设置</template>
          </lay-dropdown-menu-item>
          <lay-line></lay-line>
          <lay-dropdown-menu-item @click="logOut">
            <template #default>注销登录</template>
          </lay-dropdown-menu-item>
        </lay-dropdown-menu>
      </template>
    </lay-dropdown>
    <lay-tooltip content="偏好设置" trigger="hover">
      <lay-icon class="tool-icon" @click="changeVisible" type="layui-icon-more-vertical"></lay-icon>
    </lay-tooltip>
    <Setup v-model="visible"></Setup>
  </div>
</template>

<style scoped>
.tool {
  padding-right: 0.75rem;
}


</style>
